<!--
 * @Author: YMJ
 * @Date: 2020-10-30 10:47:06
-->
<template>
  <div>
    <!-- 列表 -->
    <tab-list
      ref="list"
      :searchs="searchs"
      :list-hedar="listHedar"
      :params="params"
      :api-function="apiFunction"
      @init-params="initParams"
    >
      <span slot="companyType" slot-scope="scope">
        {{
          scope.value.companyType === '0' ? '企业' :
          scope.value.companyType === '1' ? '政府事业单位' :
          scope.value.companyType === '2' ? '个体工商户' : '其他组织'
        }}
      </span>
      <span
        slot="authStatus"
        slot-scope="scope"
        :style="`color:${
          scope.value.authStatus === '2' ? '#F56C6C' :
          scope.value.authStatus === '1' ? '#67C23A' : '#909399'
        }`"
      >
        {{
          scope.value.authStatus === '3' ? '认证失败' :
          scope.value.authStatus === '2' ? '待审核' :
          scope.value.authStatus === '1' ? '已认证' : '未认证'
        }}
      </span>
      <span
        slot="frozen"
        slot-scope="scope"
        :style="`color: ${scope.value.frozen === '1' ? '#F56C6C' : '#67C23A'}`"
      >
        {{
          scope.value.frozen === '1' ? '禁用' : '正常'
        }}
      </span>
      <template slot="operate" slot-scope="scope">
        <el-button v-if="scope.value.authStatus2 === '1'" type="text" size="small" @click="attestation(scope.value.companyId)">认证</el-button>
        <el-button v-if="!scope.value.disabled" type="text" size="mini" @click="freezesCompany(scope.value)">
          <span :style="`color: ${scope.value.frozen == '0' ? '' : '#F56C6C'}`">
           {{ scope.value.frozen == '0' ? '禁用' : '解禁' }}
          </span>
        </el-button>
        <el-button v-show="!scope.value.disabled" type="text" size="mini" @click="companyDetail(scope.value.companyId)">组织详情</el-button>
        <el-button v-show="!scope.value.disabled" type="text" size="mini" @click="authRecords(scope.value.companyId)">认证记录</el-button>
      </template>
    </tab-list>
    <!-- 禁用、解禁 -->
    <el-dialog
      title="禁用用户"
      v-if="forbidBox"
      :visible.sync="forbidBox"
      :close-on-click-modal="false"
      width="40%"
      > 
        <edit-form
          ref="formForbid"
          :form="formForbid"
          :edit-list="editList1"
          :rules="rulesForbid"
          validate-on-rule-change
          @on-submit="addOrEdit()"/>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary"  @click="$refs.formForbid.ruleFrom()">确 定</el-button>
            <el-button @click="forbidBox = false">取 消</el-button>
          </span>
    </el-dialog>
    <el-dialog title="组织认证" :visible.sync="authShow" width="30%" :close-on-click-modal="false">
      <text-list :text-list="textLists" :detail-info="detailInfo1" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="companyAuth(true)">同 意</el-button>
        <el-button @click="authShow2 = true">拒 绝</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="组织认证"
      :visible.sync="authShow2"
      width="30%"
      :close-on-click-modal="false"
      @open="$refs.form && $refs.form.resetForm()"
    >
      <edit-form
        ref="form"
        :rules="rules"
        :edit-list="editList"
        :form="form"
        @on-submit="companyAuth(false, form.reason)"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="authShow2 = false">取 消</el-button>
        <el-button type="primary" @click="$refs.form.ruleFrom()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="组织详情" :visible.sync="authShow3" width="50%" :close-on-click-modal="false">
      <text-list :text-list="textLists2" :detail-info="detailInfo2">
        <template slot="video">
          <span>视频介绍： </span>
          <video-player
            ref="videoPlayer"
            class="video-player vjs-custom-skin"
            :playsinline="true"
            :close-on-click-modal="false"
            :options="playerOptions"
          />
        </template>
      </text-list>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="authShow3 = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 企业认证记录 -->
    <el-dialog title="组织认证记录" :visible.sync="authShow4">
      <tab-list
        ref="recordList"
        :searchs="recordSearchs"
        :list-hedar="recordHedar"
        :params="params2"
        :api-function="apiFunction2"
        @init-params="initParams2"
      >
        <span slot="authStatus" slot-scope="scope">
          {{
            scope.value.authStatus === '0' ? '未认证' :
            scope.value.authStatus === '1' ? '已认证' :
            scope.value.authStatus === '2' ? '审核中' : '认证失败'

          }}

        </span>
        <!-- 操作 -->
        <template slot="operate" slot-scope="scope">
          <el-button v-if="scope.value" type="text" size="mini" @click="addBlackList(scope.value)"> {{ scope.value.isBlack ? "退出黑名单": "加入黑名单" }}</el-button>
        </template>
      </tab-list>
      <span slot="footer" class="dialog-footer">
        <el-button @click="authShow4 = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 组件
import tabList from '@/components/admin/tab-list.vue'
import textList from '@/components/admin/text-list.vue'
import editForm from '@/components/admin/edit-form.vue'
// 公共方法
import { asyncApiFun, openMessageBox } from '@/utils/utils'
// 接口
import { companyList, authDetail, companyAuth, companyDetail, companyFreeze, companyForbidden, authRecords, isBlackList } from '@/api/organize.js'
// 页面配置
import { listHedar, searchs, recordSearchs, recordHedar, editList1,textLists, textLists2, editList, rules, playerOptions } from './config/list.config.js'

export default {
  components: {
    tabList,
    textList,
    editForm
  },
  data() {
    return {
      authShow: false,
      authShow2: false,
      authShow3: false,
      authShow4: false,
      forbidBox:false,   //禁用弹窗标识
      textLists,
      detailInfo1: {},
      editList,
      editList1,        //禁用配置
      form: {},
      formForbid:{expire:''}, //禁用
      rules,
      rulesForbid: {
           expire: { required: true, message: '请输入禁用时长' }   
       },
      textLists2,
      detailInfo2: {},
      playerOptions,
      searchs,
      recordSearchs, // 企业认证记录的搜索
      recordHedar, // 企业认证记录的头部
      params: {}, // 当前列表的参数
      params2: {}, // 企业认证记录的参数
      listHedar,
      apiFunction: companyList,
      apiFunction2: authRecords,
      bizId:'',  //业务ID  
    }
  },
  methods: {
    // 认证组织详情弹窗
    async attestation(id) {
      const [res] = await asyncApiFun(authDetail, id)
      if (res) {
        this.detailInfo1 = res.data
        this.authShow = true
      }
    },
    // 同意或拒绝组织
    async companyAuth(operation, reason) {
      const params = {
        operation,
        id: this.detailInfo1.companyId,
      }
      // 拒绝时
      if (reason) params.reason = reason
      const [res] = await asyncApiFun(companyAuth, params)
      if (res) {
        this.authShow = false
        this.authShow2 = false
        this.$refs.list.getList()
      }
    },
    // 组织详情
    async companyDetail(id) {
      const [res] = await asyncApiFun(companyDetail, id)
      if (res) {
        this.detailInfo2 = res.data
        this.playerOptions.sources[0].src = res.data.companyVideo
        this.authShow3 = true
      }
    },
    // 冻结组织-禁用
    freezesCompany({ companyId, frozen }) {
      const _content = `${frozen == '1' ? '解禁' : '禁用'}后，用户将${frozen == '1'? '能够重新' : '不能'}登录系统，是否确认？`
      const _title = `${frozen== '1' ? '解禁' : '禁用'}用户`
      if(frozen =='0'){
        this.forbidBox = true
        this.bizId = companyId
      }
      else{
        // 解禁
       openMessageBox({
        content: _content,
        title: _title
        }, async boole => {
          if (boole) {
            const params = {
              bizId: companyId,
              freeze: false
            }
            const [res] = await asyncApiFun(companyForbidden, params)
            if (res) this.$refs.list.getList()
            this.forbidBox = false
            this.$message({
              message: '解禁成功',
              type: 'success'});
            }
       })
      }
    },
     // 禁用
    async addOrEdit(){
      //  1.发送网络请求
        const params = {
          bizId:this.bizId,
          duration:Number(this.formForbid.expire),
          isPermanent:this.formForbid.expire == 0 ? true:false ,
          freeze: true,
        }
         const [res] = await asyncApiFun(companyForbidden, params)
         if(res) this.$refs.list.getList()
      // 2.关闭弹窗并刷新列表
          this.forbidBox = false
      
     },
    // 禁用企业
    // forbiddenCompany({ companyId, disabled }) {
    //   const _title = `${disabled ? '解禁' : '禁用'}企业`
    //   const _content = `${disabled ? '解禁后企业恢复正常' : '禁用后企业所有信息将从用户端消失，是否确认'}`
    //   openMessageBox({
    //     content: _content,
    //     title: _title
    //   }, async boole => {
    //     if (boole) {
    //       const params = {
    //         bizId: companyId,
    //         disabled: !disabled
    //       }
    //       const [res] = await asyncApiFun(companyForbidden, params)
    //       if (res) this.$refs.list.getList()
    //     }
    //   })
    // },
    // 认证记录
    async authRecords(id) {
      this.params2 = { id }
      this.authShow4 = true
      // 判断认证记录弹窗是否二次打开
      const recordList = this.$refs.recordList
      // 认证记录已加载过，再次打开手动发起请求
      recordList && recordList.clearParams()
    },
    // 认证记录-加入/退出黑名单
    async addBlackList({ id, isBlack }) {
      const _params = {
        id,
        type: Number(!isBlack)
      }
       const [res] = await asyncApiFun(isBlackList, _params)
    //  刷新
       if (res) this.$refs.recordList.getList()
    },
    // 初始化参数
    initParams(param) {
      this.params = param
    },
    initParams2(param) {
      const { id } = this.params2
      this.params2 = { id, ...param }
    }
  }
}
</script>

<style lang="scss" scoped>
.video-player {
  display: inline-block;
  width:350px;
  vertical-align: middle;
}
</style>
